<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dropdown Menu 01</title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link
            href="https://fonts.googleapis.com/css2?family=Red+Hat+Display&display=swap"
            rel="stylesheet"
        >
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <span class="navigation__group">
                <img class="icon" src="assets/message.svg" alt="Message">
                <img class="icon" src="assets/notification.svg" alt="Notification">
                <img class="profile" src="assets/joe-doe-profile.png" alt="Joe Doe Picture">
            </span>
            <div class="dropdown__wrapper hide dropdown__wrapper--fade-in none">
                <div class="dropdown__group">
                    <div class="user-name">Joe Doe</div>
                    <div class="email">joe.doe@atheros.ai</div>
                </div>
                <hr class="divider">
                <nav>
                    <ul>
                        <li>
                            <img src="assets/profile.svg" alt="Profile"> My Profile
                        </li>
                        <li>
                            <img src="assets/settings.svg" alt="Settings"> Settings
                        </li>
                    </ul>
                    <hr class="divider">
                    <ul>
                        <li>
                            <img src="assets/tutorials.svg" alt="Tutorials"> Tutorials
                        </li>
                        <li>
                            <img src="assets/help.svg" alt="Help"> Help Center
                        </li>
                    </ul>
                    <hr class="divider">
                    <ul>
                        <li>
                            <img src="assets/premium.svg" alt="Premium">Go Premium
                        </li>
                        <li style="color: #E3452F;">
                            <img src="assets/logout.svg" alt="Log Out">Log out
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <script src="script.js"></script>
    </body>
</html>



